<template>
    <div class="Learn">
        <div class="item">辅导竞赛</div>
        <div class="item">外汇培训</div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
    name: 'Learn'
})
export default class extends Vue {
}
</script>

<style scoped lang="less">
.Learn {
    & .item {
        width: 6.9rem;
        height: 1.8rem;
        background-color: #D8D8D8;
        border-radius: 0.1rem;
        margin-bottom: 0.2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
        }
        &:active {
            &:after {
                background-color: rgba(255, 255, 255, .2);
            }
        }
    }
}
</style>
